<template>
    <div class="Bigbox">
        <!-- 左侧模块 -->
        <div class="user" v-show="isShow">
            <!-- 管理员 -->
            <div class='username'>
                <div class="user_pic" @click="turnToAdmin" @mouseout="changeShow2()" @mouseover="changeShow1()">
                    <img src="@/assets/00.png" alt="" class="img1" v-show="!pic_show">
                    <img src="@/assets/11.png" alt="" class="img2" v-show="pic_show">
                </div>            
                <div class="admin">
                    <span>饲养员：{{name}}</span><br>
                    <span>{{centence}}</span>
                </div>
            </div>
            <!-- 标签 -->
            <div class="label">
                <span class="tag">文章分类</span>
                <ul class="sortUl">
                    <li  v-for="(s,index) in sortList" :key="index" @click="turnToSearchSort(s)">
                        <i class="iconfont icon-24gl-tags3"></i>{{s}}
                    </li>
                </ul>
            </div>
            <!-- 推荐栏目 -->
            <div class="recommen">
                <span class="tuijian">推荐</span>
                <!-- 音乐栏目 -->
                <div class="music">
                <span class="sp1">音乐:</span>
                <span class="sp2">戒网</span>
                <span class="sp3">典狱司</span>
                <span class="sp4">不染</span>
                <span class="sp5">无脚鸟</span>
                <span class="sp6">Lemon</span>
                </div>
                <!-- 游戏栏目 -->
                <div class="game">
                    <span class="sp7">游戏:</span>
                    <span class="sp8">CS:GO</span>
                    <span class="sp9">战地1</span>
                    <span class="sp10">巫师3</span>
                    <span class="sp11">怪物'猎'人</span>
                </div>
                <!-- 电影推荐 -->
                <div class="movie">
                  <span class="sp12">电影:</span>
                  <span class="sp13">我和我的祖国</span>
                  <span class="sp14">误杀</span>
                  <span class="sp15">肖申克的救赎</span>
                  <span class="sp16">贝克街的亡灵</span>
                </div>
            </div>
        </div>
        <!-- <div class="rBox" v-show="isShow">
            <div class="upBox">
                <div class="list">文章目录</div>
            </div>
            <div class="downBox">
            </div>
            <div class="up" @click="up">
                <i class="iconfont icon-long-arrow-up"></i>
            </div>
        </div> -->
        <div class="star">
        </div>
        <div class="sentence">
            遇事不决，可问春风
        </div>
        <div class="down">
            <div class="down1" @click="go">
                <span></span>
            </div>
        </div>
    </div>
</template>

<script>
import {mapState} from 'vuex'
export default {
    name:'homeTop',
    data(){
        return {
            isShow: false,
            name:'爱学习的小狼',
            centence:'褪去一身洒脱 不过是天涯倦客 饮尽悲欢无人与说',
            pic_show:true
        }
    },
    methods:{
        go(){
            window.scrollTo({
                top:0.92*document.body.clientHeight,
                behavior:'smooth'
            })
        },
        changeShow(){
            let scrollTop = window.pageYOffset 
            // 下滑高度等于 浏览器视口 即html整个网页高度时
            if(scrollTop >= ( 0.92 * document.documentElement.clientHeight-1 )){
                this.isShow = true
            }
            if(scrollTop <  (0.92* document.documentElement.clientHeight-1)){
                this.isShow = false
            }
        },
        turnToAdmin(){
            this.$router.push({
            path:'/admin'
        })
        },
        changeShow1(){
            this.pic_show = false
        },
        changeShow2(){
           this.pic_show = true
        },
        up(){
            window.scrollTo({
                top:0.92*document.body.clientHeight,
                behavior:'smooth'
            })
        },
        turnToSearchSort(s){
        this.$store.dispatch('searchSort',s)
        this.$router.push({
          path:'/search'
        })
      }
    },
    mounted(){
        window.addEventListener('scroll',this.changeShow) // 监听页面滚动
    },
    computed:{
        ...mapState(['blogList','sortList']),
    }
}
</script>


<style scoped>
    .Bigbox {
        position: relative;
        background-color: transparent;
        height: 100%;
        font-family: "NLXJ-BODY";
    }
    .user {
        /* background-color: pink; */
        height: 100%;
        width: 20%;
        position: fixed;
        top: 8%;
        left: 10%;
        z-index: 99;
        font-size: 15px;
        color:rgb(190, 139, 156);
        background-color:rgba(255,255,255,0.9);
    }
    .username {
        position: absolute;
        left: 0;
        top: 0;
        height: 31%;
        width: 100%;
    }
    .label {
        position: relative;
        left: 0;
        top: 31%;
        height: 30%;
        width: 100%;
        border-top: 1px gray solid;
  }
  .tag {
    position: absolute;
    top: 5%;
    left: 50%;
    transform: translate(-50%);
    height: 10%;
    width: 100%;
  }
  .recommen{
  position: absolute;
  top: 61%;
  height: 31%;
  width: 100%;
  border-top: 1px gray solid;
  }
    .star {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translate(-50%);
        width: 20%;    
        height: 45%;
    }
    .star .user {
        background-color: trans;
        height: 100%;
        width: 100%;
    }
    .sentence {
        position: absolute;
        left: 50%;
        top:45%;
        transform: translate(-50%);
        height: 10%;
        font-size: 40px;
        color: white;
        font-family: "NLXJ-BODY";
    }
    .down {
        position: absolute;
        top: 55%;
        right: 0;
        background-color: transparent;
        height: 45%;
        width: 100%;
        color: white;
        font-size: 15px;
    }
    .down1 {
        background-color:transparent;
        position: absolute;
        left: 50%;
        bottom: 0%;
        transform: translate(-50%);
        height: 200px;
        width: 500px;
        text-align: center;
        cursor: pointer;
    }
    .down1 span {
        display: inline-block;
        height: 40px;
        width: 40px;
        border-left: 3px solid white;
        border-bottom: 3px solid white;
        transform: rotate(-45deg);
        animation: down 1.2s linear infinite;
    }
    @keyframes down {
        0% {
            opacity: 1;
        }
        40% {
            opacity: 0.7;
            margin-top:30px
        }
        70% {
            opacity: 0.4;
            margin-top:55px;
        }
        100%{
            opacity: 0.0;
            margin-top:80px;
        }
    }
    .user_pic {
      position: absolute;
      left: 50%;
      top: 10%;
      transform: translate(-50%);
      width: 30%;
      height: 40%;
      border: 1px solid gray;
      border-radius: 49%;
      overflow: hidden;
      cursor: pointer;
      z-index: 9;
    }
    .img1 {
        width:100%;
        height:100%;
    }
    .img2 {
        width:100%;
        height:100%;
        position:absolute;
        top:0;
        left:0;
        margin-top: -1px;
    }
    .admin {
      width: 100%;
      height: 30%;
      background-color: transparent;
      text-align: center;
      position: absolute;
      top: 60%;
      /* background-color: green; */
    }
    .admin span {
      display: inline-block;
      padding:5px;
    }
    .up {
        background-color: rgba(255,255,255,0.9);
        width: 15%;
        height: 10%;
        position: absolute;
        bottom: -15%;
        left: 5%;
        border-radius: 50%;
        text-align:center;
        cursor: pointer;
        border: none;
    }
    /* .iconfont {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
    } */
.tuijian {
    position: absolute;
    top: 5%;
    left: 50%;
    transform: translate(-50%);
}
.music {
    position: relative;
    top: 20%;
    left: 0%;
    width: 100%;
    height: 20%;
}
.sp1 {
    position: absolute;
    top: 20%;
    left: 5%;
}
.sp2 {
    position: absolute;
    top: 20%;
    left: 18%;
}
.sp3 {
    position: absolute;
    top: 20%;
    left: 29%; 
}
.sp4 {
    position: absolute;
    top: 20%;
    left: 45%;
}
.sp5 {
    position: absolute;
    top: 20%;
    left: 56%;
}
.sp6 {
    position: absolute;
    top: 20%;
    left: 72%;
}
.sp2,.sp3,.sp4,.sp5,.sp6 {
    cursor: pointer;
}
.sp2:hover,.sp3:hover,.sp4:hover,.sp5:hover,.sp6:hover {
    color: rgb(26, 179, 239);
}
.game {
    position: relative;
    top: 20%;
    left: 0%;
    width: 100%;
    height: 20%;
}
.sp7 {
    position: absolute;
    top: 20%;
    left: 5%;
}
.sp8 {
    position: absolute;
    top: 20%;
    left: 18%;
}
.sp9 {
    position: absolute;
    top: 20%;
    left: 32%; 
}
.sp10 {
    position: absolute;
    top: 20%;
    left: 45%;
}
.sp11 {
    position: absolute;
    top: 20%;
    left: 60%;
}
.sp8,.sp9,.sp10,.sp11 {
    cursor: pointer;
}
.sp8:hover,.sp9:hover,.sp10:hover,.sp11:hover {
    color: rgb(26, 179, 239);
}
.movie {
  position: absolute;
    top: 60%;
    left: 0%;
    width: 100%;
    height: 20%;
}
.sp12 {
    position: absolute;
    top: 20%;
    left: 5%;
}
.sp13{
    position: absolute;
    top: 20%;
    left: 17%;
}
.sp14 {
    position: absolute;
    top: 20%;
    left: 46%; 
}
.sp15 {
    position: absolute;
    top: 20%;
    left: 57%;
}
.sp16 {
    position: absolute;
    top: 50%;
    left: 17%;
}
.sp13,.sp14,.sp15,.sp16 {
    cursor: pointer;
}
.sp13:hover,.sp14:hover,.sp15:hover,.sp16:hover {
    color: rgb(26, 179, 239);
}

.label .sortUl{
  background-color: transparent;
  position: absolute;
  top: 15%;
  left: 0;
  width: 100%;
  height: 85%;
}
.label .sortUl li{
  position: relative;
  left: 50%; 
  transform: translate(-50%);
  height: 25px;
  width: 100%;
  border-bottom: none;
  cursor: pointer;
}
.sortUl li:hover {
    color:rgb(26, 179, 239)
}
</style>